import React, { useEffect, useState } from 'react';
import axios from 'axios'
import Styles from './hot.module.css'
import {useNavigate} from 'react-router-dom'
const Index = () => {
    const Navigate=useNavigate()
    const [movie, setMovie] = useState([])
    const getMovie = async () => {
        var res = await axios.get('http://122.112.161.135:4000/api/movie/comingSoon')
        setMovie(res.data.res)
    }
    useEffect(() => {
        getMovie()
    });
    return (
        <div className={Styles.page}>
            {
                movie.map((item, index) => {
                    return (
                        <div key={index} className={Styles.item} onClick={()=>{Navigate(`/detail/${item._id}`)}}>
                            <img src={item.pic} alt="" />
                            <div>
                                <h2>{item.title}</h2>
                                <p>{item.slogo}</p>
                                <p>{item.rating}分</p>
                            </div>
                        </div>
                    )
                })
            }
        </div>
    );
}

export default Index;